<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/anim.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        <!--页面一-->
        <div class="page_01">
            <div class="container">
                <div class="right_img"><img src="img/adfont.png" alt="" /></div>
                <div class="action_01">
                    <p class="img_01 pp"><img src="img/bnr_b1.png" /></p>
                    <p class="img_02 pp"><img src="img/bnr_b2.png" /></p>
                    <p class="img_03 pp"><img src="img/bnr_b3.png" /></p>
                    <p class="img_04 pp"><img src="img/bnr_b4.png" /></p>
                    <p class="shadow pa"><img src="img/shadow.png" alt="" /></p>
                </div>
            </div>
        </div>
        <!--页面二-->
        <div class="page_02">
            <div class="container">
                <p class="img_21 pp"><img src="img/two_b1.png" alt="" /></p>
                <p class="img_22 pp"><img src="img/two_b2.png" alt="" /></p>
                <div class=" text pp">
                    <p class="h2">圣诞老人“魔法奇妙世界”</p>
                    <p>圣诞老人托我转告：说你不厚道，去年烟囱不刷，把他脏得像黑炭;袜子也不洗，把他差点熏倒!今年圣诞他不来了，我特发短信前来安慰，希你不要哭要笑!</p>
                    <a href="#">进一步了解圣诞></a>
                    <span class="imgs"></span>
                </div>
            </div>
        </div>
        <!--页面三-->
        <div class="page_03">
            <div class="column">
                <div class="con">
                    <p class="h2">今年圣诞不收礼，收礼只收短信息
                    </p>
                    <p>圣诞通知：由于圣诞期间圣诞老人忙于代言和演出，故决定所有礼物折成现金发放，请收到短信者凭验证码到各银行领取，您的验证码为：我生蛋，我快乐!</p>
                    <a href="#">进一步了解圣诞></a>
                    <span class="imgs1"></span>
                </div>
                <p class="three pp">
                <img src="img/three_b1.png" alt="" />
                </p>
            </div>
        </div>
        <!--页面四-->
        <div class="page_04">
            <div class="column_02">
                <div class="text_04">
                    <p class="h2">叮叮当叮叮当铃儿响叮当
                    </p>
                    <p>来到大街上，每个角落都让人感受到过节的气氛。几乎所有的商场都摆着圣诞树，有的放在门口，有的摆在大厅。<br />圣诞树呈塔形，穿着一件绿衣裳，身上挂着的一个个小铃铛，轻轻一碰，叮当叮当发出动听的声音；金色的小灯，好像天上眨眼的星星；五颜六色的小灯笼，一闪一闪的，美丽极了！</p>
                    <a href="#">进一步了解圣诞</a>
                    <span class="imgs2"></span>
                </div>
                <p class=" four pp">
                <img src="img/four_b1.png" alt="" />
                </p>
            </div>
        </div>
        <!--页面五-->
        <div class="page_05 pr">
            <div class="container column_03">
                <div class="text_05 pp">
                    <p class="h2">浪漫圣诞雪，凉意更快乐。
                    </p>
                    <span class="spans">May the joy and warmth of Christmas fill your home with happiness.<br />
                    愿圣诞的欢乐和温馨，带给你家无边的幸福。<br />
                    May peace and love be your gift at Christmas and always!<br />
                    献上祥和与爱心，在圣诞以至永远！<br />
                    Wishing you the peace, joy and happiness of Christmas!<br />
                    祝圣诞安宁、欢乐、幸福！</span><br />
                    <a href="#">进一步了解圣诞></a>
                </div>
                <div class="five">
                    <span class="flowr pp"><img src="img/flowr.png"></span>
                </div>
            </div>
        </div>
        <!--页面六-->
        <div class="page_06 pp">
            <div class="container">
                <div class="text_06 pp">
                    <span class="h2">有个消息要紧急提醒你</span>
                    <span class="spans">你现在在哪?有个事告诉你，你一定要冷静要有思想准备，<br>有一伙人在四处打听你，还说逮住不轻饶你，<br>他，一个叫财神，一个叫顺心，领头，叫幸福。</span>
                    <a href="#">进一步了解圣诞 &gt;</a>
                    <p class="imgs6"></p>
                </div>
                <p class="seven pp">
                <img src="img/seven_b1.png" alt="" />
                </p>
                <p class="card pp">
                <img src="img/cd.png" alt="" />
                </p>
            </div>
        </div>
        <!--页面七-->
        <div class="page_07">
            <div class="container column_07">
                <div class="text_07 pp">
                    <p class="h2">圣诞老人活灵活现</p>
                    <p class="spans">有一个老人，在河岸边抛了个圈，于是有了最强的排行榜，封神榜;有一个老人，在诸侯中跑了<br>个圈，于是有了最早的微博集，叫论语;有一个老人，在雪地里转了个圈，于是有了最火<br>的洋人节，圣诞节。圣诞将到，我在手机上按了个圈，于是有了最早的祝福：<br>
                    你的礼物是我给你一生的祝福!</p>
                    <a href="#">进一步了解圣诞!</a>
                    <p class="imgs7"></p>
                </div>
                <div class="eight">
                    <span class="eight_01 pp"><img src="img/enght_b1.png" ></span>
                    <span class="eight_02 pp"><img src="img/enght_b2.png" ></span>
                    <span class="eight_03 pp"><img src="img/enght_b3.png" ></span>
                </div>
                <div class="foot pp">
                    <p>圣诞老人永远也不要离开我们。一定会记住12月24日这个日子。</p>
                    <a href="#">圣诞快乐</a>
                </div>
        </div>
    </div>
</body>
<script type="text/javascript">
//滚动动画
$(function() {
     //计算banner高度   
    var bannerH = $(".page_01").height(),
        //手机图片滚动的百分比，按scrollTOP计算      
        animPercent = 0.2, 
        //图片数组---要添加动画的
        scrollAnimNode = $(".img_01, .img_02, .img_03, .img_04"),
        scrollAnimShow = $(".shadow"),
        //初始化时获取当前 滚动高度
        beforeScrollTop = $(window).scrollTop(),
        //距离页面顶部的距离
        page_02 = $(".page_02").offset().top,
        page_03 = $(".page_03").offset().top,
        page_04 = $(".page_04").offset().top,
        page_06 = $(".page_06").offset().top,
        delta = 0;
        //将圣诞飞车放到最右边
        // $(".four img").css({right: -1000});

    $(window).scroll(function(){
        //当前滚动高度
        var top = $(window).scrollTop();
        //动画的动作幅度
        animTop = top*animPercent,
        animTops = (top-bannerH) / 0.5 * animPercent;
        animTop_slow = (top-bannerH) / 2 * animPercent;
        animTop_many = (top-bannerH) / 4 * animPercent;
        //动画的动作幅度----旋转
        rotateLen = top / 4 * animPercent;
        //判断浏览器滚动高度是否大于100，如果大于，动画不动
        animTop = animTop > 100 ? 100: animTop;
        //作用同上
        rotateLen = rotateLen > 15 ? 15 : rotateLen;

        //判断滚动高度是否到达 添加动画的条件---这是圣诞道具
        if( top < bannerH * 2 / 3){
            //每个图片添加动画
            scrollAnimNode.each(function(){
                $(this).find('img').css('transform','translate3d(0,-'+animTop+'px,0)');
            });
            //给图片的投影添加动画
            scrollAnimShow.css('transform','scale('+(1-animTop/110)+')');
            //给图片添加旋转
            $(".img_03 img").css('transform','translate3d(0,-'+animTop+'px,0) rotate(-'+rotateLen+'deg)');
            $(".img_01 img").css('transform','translate3d(0,-'+animTop+'px,0) rotate('+rotateLen+'deg)');
            }
            //判断滚动高度是否到达 添加动画的条件---圣诞老人
            if( top > bannerH * 1/3){
                rotateLen = (top-bannerH)/5*animPercent;
                $(".img_21 img").css('transform','translate3d(0,-'+animTops+'px,0) rotate(-'+rotateLen+'deg)');
                $(".img_22 img").css('transform','translate3d(0,-'+animTops+'px,0) rotate(-'+rotateLen+'deg)');
            }
            //判断滚动高度是否到达 添加动画的条件---圣诞卡
            if(top > bannerH * 1/3 && top < page_03 +200){
                $(".three img").css('transform','translate3d(0,-'+animTops+'px,0)');
            }
            //判断滚动高度是否到达 添加动画的条件---圣诞飞车
            if(top > bannerH * 1 / 3 && top < page_04 +200){
            $(".four img").css('transform','translate3d(-'+animTops+'PX,0,0)');
            }
            //判断滚动高度是否到达 添加动画的条件---雪花
            if(top > bannerH * 1 / 3){
                rotateLens = (top-bannerH)/0.5*animPercent;
                $(".flowr img").css('transform','scale(1) rotate(-'+rotateLens+'deg)');
            }
            //判断滚动高度是否到达 添加动画的条件---圣诞爷爷
            if(top > bannerH *2 && top < page_06 + 500){
                $(".seven img").css('transform','translate3d(-'+animTop_slow+'PX,0,0)');
                $(".card img").css('transform','translate3d(-'+animTop_slow+'PX,0,0)');
            }
            //判断滚动高度是否到达 添加动画的条件---圣诞爷爷三
            if(top > bannerH * 1/ 3){
                $(".eight_02 img").css('transform','translate3d(-'+animTop_many+'PX,0,0)');
                $(".eight_03 img").css('transform','translate3d(+'+animTop_many+'PX,0,0)');
             
            }
        })
    })
</script>
</html>


